<template>
  <view class="person-content">
    <view class="ip-item user-picture" @click="uploadingImageChange">
      <text>头像</text>
      <image :src="avatar" mode="" />
    </view>
    <view class="ip-item user-picture" @click="uploadingImageChange1">
      <text>群主二维码</text>
      <image :src="wxQrCode" mode="" />
    </view>
    <view class="ip-item">
      <input
        type="text"
        v-model="writeUserName"
        placeholder="手机号"
        placeholder-class="ip"
        disabled
      />
    </view>
    <view class="ip-item">
      <input
        type="text"
        v-model="writeUserNickName"
        placeholder="请输入用户昵称"
        placeholder-class="ip"
      />
    </view>
  </view>

  <view class="btns pseron-uploading">
    <view class="fixed-content">
      <Button
        @clickButton="carete"
        :loading="loading"
        loading-text="修改中"
        text="确认修改"
      />
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { updateUserInfo, getUserInfo } from "@/api/apiList";
import { BASE_URL } from "@/config/base.js";
const writeUserName = ref<string>("");
const writeUserNickName = ref<string>("");
// updateUserInfo
const loading = ref<boolean>(false);
const wxQrCode = ref();
const carete = async () => {
  loading.value = true;
  const parms = {
    // userName: writeUserName.value,
    nickName: writeUserNickName.value,
    avatar: avatar.value,
    userId: uni.getStorageSync("userInfo")?.userId,
    wxQrCode: wxQrCode.value,
  };
  console.log(parms);
  const response = await updateUserInfo(parms);
  if (response) {
    setTimeout(() => {
      if (response?.code == 200) {
        uni.showToast({
          title: "修改成功",
          icon: "none",
        });
        // getUserInfoChange();
        setTimeout(() => {
          getUserInfoChange();
        }, 800);
      }
      loading.value = false;
    }, 2000);
  }
};

const avatar = ref();
const uploadingImageChange = () => {
  uni.chooseImage({
    success: (res) => {
      const url = res.tempFilePaths[0];
      console.log(url, "==");
      uni.uploadFile({
        // url: BASE_URL + "/common/upload",
        url: BASE_URL + "/prod-api/common/upload",
        name: "file",
        filePath: url,
        header: {
          Authorization: "Bearer " + uni.getStorageSync("token"),
        },
        success: (result) => {
          const JSONDATA = JSON.parse(result?.data);
          if (JSONDATA) {
            avatar.value = JSONDATA?.url;
          }
        },
      });
    },
  });
};
const uploadingImageChange1 = () => {
  uni.chooseImage({
    success: (res) => {
      const url = res.tempFilePaths[0];
      console.log(url, "==");
      uni.uploadFile({
        // url: BASE_URL + "/common/upload",
        url: BASE_URL + "/prod-api/common/upload",
        name: "file",
        filePath: url,
        header: {
          Authorization: "Bearer " + uni.getStorageSync("token"),
        },
        success: (result) => {
          const JSONDATA = JSON.parse(result?.data);
          if (JSONDATA) {
            wxQrCode.value = JSONDATA?.url;
          }
        },
      });
    },
  });
};

const getUserInfoChange = async () => {
  const response = await getUserInfo();
  if (response.code == 200) {
    writeUserName.value = response?.data?.phonenumber;
    writeUserNickName.value = response?.data?.nickName;
    avatar.value = response?.data?.avatar;
    wxQrCode.value = response?.data?.wxQrCode;
  }
};
getUserInfoChange();
</script>
<style lang="scss" scoped>
.person-content {
  margin: 34rpx;
}

.user-picture {
  display: flex;
  align-items: center;
  justify-content: space-between;

  text {
    font-family: PingFang SC Medium;
    font-size: 16px;
    font-weight: normal;
  }

  image {
    width: 88rpx;
    height: 88rpx;
    background: #0753fd;
    border-radius: 100rpx;
    margin: 8rpx 0;
  }
}

.pseron-uploading {
  position: fixed;
  bottom: 80rpx;
  display: flex;
  width: 100%;

  .fixed-content {
    flex: 1;
    margin: 34rpx;
  }
}
</style>
<style>
page {
  background: #f6f6f6;
}
</style>
